<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 页面meta -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>电商管理前端</title>
    <link rel="shortcut icon" href="../favicon.ico">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../styles/common.css" />
    <link rel="stylesheet" href="../styles/index.css" />
    <link rel="stylesheet" href="../styles/icon/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../styles/all.css" />
    <link rel="stylesheet" type="text/css" href="../styles/pages-JD-index.css" />
    <link rel="stylesheet" type="text/css" href="../styles/pages-cart.css" />
    <style type="text/css">
        h4{
            font-size: 20px;
            line-height: 35px;
            text-align: center;
        }
    </style>
</head>
<body>
<!-- 头部栏位 -->
<!--页面顶部-->
<div id="app">
    <!--顶部-->
    <div class="nav-top">
        <div class="top">
            <div class="py-container">
                <div class="shortcut">
                    <ul class="fl">
                        <span v-if="user===''">请<a href="/pages/userlogin.html">登录</a></span>
                        <span v-else>{{user}},欢迎你</span>
                        <span><a href="register.html">免费注册</a></span>
                    </ul>
                    <div class="fr typelist" style="margin-top: -29px">
                        <ul class="types" style="margin-left: 390px">
                            <li class="f-item">
                                <span>
                                    <a href="shopping.html">首页</a>
                                </span>
                            </li>
                            <li class="f-item">
                                <span>
                                    <a href="cart.html">我的购物车</a>
                                </span>
                            </li>
                            <li class="f-item">
                                <span>
                                    <a href="home.html">个人信息</a>
                                </span>
                            </li>
                            <li class="f-item">
                                <span>
                                    <a href="/logout">退出</a>
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--头部-->
        <div class="header">
            <div class="py-container">
                <div class="yui3-g Logo">
                    <div class="yui3-u Left logoArea">
                        <img src="../images/logo2.png" style="margin-left: -40px; height: 200px; width: 250px;margin-top: -30px;">
                    </div>
                    <div class="yui3-u Rit searchArea" style="margin-right: -100px;margin-top: 72px;font-size: 40px;font-family: '宋体';color: red;">
                        欢迎来到未来生活！
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="allgoods" style="margin-top: 100px;margin-left: 100px;margin-right: 100px;">
        <div class="cart-main">
            <div class="yui3-g cart-th">
                <div class="yui3-u-1-8"></div>
                <div class="yui3-u-1-8">商品图片</div>
                <div class="yui3-u-1-8">商品名称</div>
                <div class="yui3-u-1-8">单价（元）</div>
                <div class="yui3-u-1-8">数量</div>
                <div class="yui3-u-1-8">小计</div>
                <div class="yui3-u-1-8">操作</div>
            </div>
            <div class="cart-item-list">
                <div class="cart-body">
                    <div class="cart-list">
                        <template v-for="(s,index) in shopcart">
                            <ul class="goods-list yui3-g">
                                <li class="yui3-u-1-8" style="margin-top: 70px">
                                    <input type="checkbox" checked v-model="chooseIndex" :value="index" />
                                </li>
                                <li class="yui3-u-1-8" style="margin-top: 55px">
                                    <div class="good-item">
                                        <div class="item-img"><img :src="getpicture(s.picture)" /></div>
                                    </div>
                                </li>
                                <li class="yui3-u-1-8" style="margin-top: 75px;"><div class="item-msg">{{s.goodsName}}</div></li>
                                <li class="yui3-u-1-8" style="margin-top: 75px"><span class="price">{{s.price}}</span></li>
                                <li class="yui3-u-1-8" style="margin-top: 75px"><span class="price">{{s.number}}</span></li>
                                <li class="yui3-u-1-8" style="margin-top: 75px"><span class="price">{{s.sumPrice}}</span></li>
                                <li class="yui3-u-1-8" style="margin-top: 75px">
                                    <a href="#" @click="deleteGoods(s.gid)">删除</a><br />
                                </li>
                            </ul>
                        </template>
                    </div>
                </div>
            </div>
        </div>
        <div class="cart-tool">
            <div class="select-all">

            </div>
            <div class="money-box">
                <div class="chosed">已选择<span>{{chooseIndex.length}}</span>件商品</div>
                <div class="sumprice">
                    <span><em>总价：</em><i class="summoney" >¥{{totalPrice}}元</i></span>
                </div>
                <div class="sumbtn">
                    <a class="sum-btn" href="#" @click="goToAdd">结算</a>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>

</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../plugins/axios/axios.min.js"></script>
<script src="../js/request.js"></script>
<script src="../api/login.js"></script>
<script type="text/javascript" src="../js/all.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data (){
            return {
                user:'',
                uid:'',
                shopcart:[],
                chooseIndex:[],
                gid:'',
                totalPrice:0

            }
        },
        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            axios.get("/user/getUsername").then((res) => {
                if(res.data.flag){
                    this.user=res.data.data;
                }
            });
            axios.get("/user/getUserid").then((res) => {
                if(res.data.flag){
                    this.uid=res.data.data;
                }
                this.findAll();
            });
        },
        methods: {
            getpicture(picture){
                return "http://106.13.226.130:9000/goods/"+picture;
            },
            findAll(){
                axios.get("/shopcart/findAll?uid="+this.uid).then((res)=>{
                    if (res.data.flag){
                        this.shopcart = res.data.data;
                    }
                })
            },
            deleteGoods(x){
                this.gid=x;
                this.$confirm("你确定要删除当前商品吗？","提示",{
                    type: 'warning'
                }).then(() => {
                    axios.delete("/shopcart/delete?uid="+this.uid+"&gid="+this.gid).then((res) => {
                        if(res.data.flag){
                            this.$alert("该商品已删除！");
                            this.findAll();
                        }else {
                            this.$message.error(res.data.message);
                        }
                    })
                }).catch(() => {
                })
            },
            goToAdd(){
                if (this.chooseIndex.length===0){
                    this.$alert("请选择需要购买的商品！");
                    return false;
                }else{
                    var gids="";
                    for(var i=0;i<this.chooseIndex.length;i++){
                        var index=this.chooseIndex[i];
                        var gid=this.shopcart[index].gid;
                        if(i<this.chooseIndex.length-1){
                            gids=gids+gid+",";
                        }else {
                            gids=gids+gid;
                        }
                    }
                    window.location.href="/pages/order.html?gids="+gids;

                }
            }
        },
        watch:{
            chooseIndex: function () {
                this.totalPrice=0;
                for(var i=0;i<this.chooseIndex.length;i++){
                    var index=this.chooseIndex[i];
                    this.totalPrice=this.totalPrice+this.shopcart[index].sumPrice
                }
            }
        }
    })
</script>
</html>